23.08.02

오늘 한 일

• gloddy 회의 및 개발
• zustand 오타 수정 PR

---

gloddy - 모임 상세 페이지 api 연결

먼저, 페이지 서버 컴포넌트에서 prefetch를 한다.

export default function GroupingByIdPage({
  params: { id },
}: {
  params: {
    id: string;
  };
}) {
  const groupId = Number(id);

  return (
    <RetryErrorBoundary>
      <Suspense fallback={null}>
        <HydrationProvider queryKey={Keys.getGroup(groupId)} queryFn={() => getGroup(groupId)}>
          <GroupingDetail groupId={groupId} />
        </HydrationProvider>
      </Suspense>
    </RetryErrorBoundary>
  );
}

그리고 GroupingDetail 컴포넌트는 클라이언트 컴포넌트로, prefetch한 데이터를 사용한다.

export default function GroupingDetail({ groupId }: GroupingDetailProps) {
  const { data: groupData } = useGetGroup(groupId);

  if (!groupData) return null;

  return (
    <>
      <GroupingTopNavigationBar />
      <TopSection groupData={groupData} />
      <ContentSection
        detailNode={<DetailContent groupData={groupData} />}
        boardNode={<BoardContent myGroup={groupData.myGroup} />}
      />
    </>
  );
}

🤔고민 - data는 무조건 undefined?

groupData는 undefined가 될 수 있다고 해서 !groupData로 체크를 해줬는데, 꼭 이렇게 분기 처리를 해야할까?

해결 방법 1 - initialData, placeholderData 사용하기

useQuery의 initialData 또는 placeholderData를 사용하면, !groupData로 분기 처리를 해줄 필요가 없다.

두 옵션의 차이는

• initialData는 캐시에 저장됨
• placeholderData는 캐시에 저장되지 않음

그냥 가짜 데이터를 넣어줄 목적이라면, placeholderData를 사용하는 것이 좋을 것 같다.

해결 방법 - @suspensive/react-query의 useSuspenseQuery 사용하기

Suspensive라는 라이브러리가 있다. 여기서 제공하는 useSuspenseQuery를 사용한다면 !groupData로 분기 처리를 해줄 필요가 없다.

말고도 다양한 기능을 제공하고 있어서, 내일 한 번 이 라이브러리를 도입할지 얘기해봐야겠다.

TKdodo 선생님이 남기신 코멘트도 보면 좋을 것 같다.

---

내일 할 일

• 카공실록 api 연결
• gloddy 개발
• cs 스터디 진행